<template>
   <el-dialog
      :title="areaData.title"
      v-model="dialogVisible"
      append-to-body
      draggable
      width="70%"
      destroy-on-close
      @close="handleClose()"
      @open="handleOpen()"
   >
      <el-form :model="queryParams" ref="serviceRef" :inline="true" :rules="rules" class="service-form">
         <el-card shadow="never" class="box">
            <template #header>
               <div class="card-header">
                  <span>服务区基本信息配置</span>
               </div>
            </template>

            <div class="text-item">
               <el-form-item label="服务区名称" prop="serviceId" label-width="110px" class="with-cover">
                  <el-tree-select
                     v-model="queryParams.serviceId"
                     :data="deptTreeData"
                     :props="{ value: 'id', label: 'label', children: 'children' }"
                     :render-after-expand="false"
                     show-checkbox
                     value-key="id"
                     check-strictly
                     placeholder="请选择服务区"
                     :disabled="!!areaData.serviceId"
                     @check-change="handleChange"
                  />
               </el-form-item>
               <el-form-item label="BI大屏标题" prop="biName" label-width="110px" class="with-cover">
                  <el-input
                     v-model="queryParams.biName"
                     placeholder="请输入BI大屏标题"
                     clearable 
                  />
               </el-form-item>

               <el-form-item label="面积(㎡)" prop="serviceArea" label-width="110px" class="with-cover">
                  <el-input v-model="queryParams.serviceArea" placeholder="请输入服务区面积">
                     <template #append>㎡</template>
                  </el-input>
               </el-form-item>

               <el-form-item label="员工数量(个)" prop="serviceEmployeeNum" label-width="110px" class="with-cover">
                  <el-input-number v-model="queryParams.serviceEmployeeNum" placeholder="请输入服务区员工数量" :min="0" class="with-cover"></el-input-number>
               </el-form-item>

               <el-form-item label="评分" label-width="110px">
                  <el-rate v-model="queryParams.serviceScore" allow-half clearable></el-rate>
               </el-form-item>
            </div>
         </el-card>

         <el-card shadow="never" class="box">
            <template #header>
               <div class="card-header">
                  <span>服务区体温异常报警通知</span>
               </div>
            </template>

            <div class="text-item">
               <el-form-item label="联系人" prop="contactPerson" label-width="90px" class="with-cover">
                  <el-input
                     v-model="queryParams.contactPerson"
                     placeholder="请输入联系人"
                     clearable
                  />
               </el-form-item>

               <el-form-item label="联系方式" prop="phonenumber" label-width="90px" class="with-cover">
                  <el-input
                     v-model.number="queryParams.phonenumber"
                     placeholder="请输入联系方式"
                     clearable
                     maxlength="11"
                  />
               </el-form-item>

               <el-form-item label="联系邮箱" prop="email" label-width="90px" class="with-cover">
                  <el-input
                     v-model="queryParams.email"
                     placeholder="请输入联系邮箱"
                     clearable
                  />
               </el-form-item>
            </div>
         </el-card>

         <el-card shadow="never" class="box">
            <template #header>
               <div class="card-header">
                  <span>服务区车位数设置</span>
               </div>
            </template>

            <div class="text-item">
               <el-form-item label="东区小客车车位数" prop="eastSbussParkingNum" class="with-cover">
                  <el-input-number v-model="queryParams.eastSbussParkingNum" placeholder="请输入东区小客车车位数" :min="0" class="with-cover"></el-input-number>
               </el-form-item>

               <el-form-item label="东区大客车车位数" prop="eastBbussParkingNum" class="with-cover">
                  <el-input-number v-model="queryParams.eastBbussParkingNum" placeholder="请输入东区大客车车位数" :min="0" class="with-cover"></el-input-number>
               </el-form-item>

               <el-form-item label="西区小客车车位数" prop="westSbussParkingNum" class="with-cover">
                  <el-input-number v-model="queryParams.westSbussParkingNum" placeholder="请输入西区小客车车位数" :min="0" class="with-cover"></el-input-number>
               </el-form-item>

               <el-form-item label="西区大客车车位数" prop="westBbussParkingNum" class="with-cover">
                  <el-input-number v-model="queryParams.westBbussParkingNum" placeholder="请输入西区大客车车位数" :min="0" class="with-cover"></el-input-number>
               </el-form-item>
            </div>
         </el-card>
      </el-form> 
      <template #footer>
         <div class="dialog-footer btn-wrap mt-50">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="emit('close')">取 消</el-button>
         </div>
      </template>
   </el-dialog>
</template>
<script setup name="Notice">
import { getServiceAreaInfo,addServiceArea,updateServiceArea } from "@/api/system/service";
import useUserStore from '@/store/modules/user'
const { proxy } = getCurrentInstance();
const emit = defineEmits(["close",'submitSuccess'])
const props = defineProps({
   areaData: { 
      type: Object, 
      default: () => {} 
   },
})

const checkScore = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请选择综合评分'))
  } else {
   proxy.$refs["serviceRef"].clearValidate(['serviceScore'])
   callback()
  }
}
const data = reactive({
  queryParams: {
   serviceId:"",
   serviceName:"",
   biName:""  ,
   serviceArea:"",
   serviceEmployeeNum:"",
   serviceScore:null,
   contactPerson:"",
   phonenumber:"",
   email:"",
   eastSbussParkingNum:"",
   eastBbussParkingNum:"",
   westSbussParkingNum:"",
   westBbussParkingNum:""
  },
  rules: {
   serviceId:[{ required: true, message: "请选择服务区", trigger: "change" }],
   biName: [{ required: true, message: "请输入BI大屏标题", trigger: "blur" }],
   serviceArea: [
      { required: true,message: "请输入服务区面积", trigger: "blur" },
      { pattern: /^\d+(\.\d+)?$/, message: "请输入数字或者和小数", trigger: "blur" },
   ],
   serviceEmployeeNum: [{ required: true, message: "请输入服务区员工人数", trigger: "change" }],
   serviceScore: [{ validator: checkScore, required: true,message: "请选择综合评分", trigger:"change" }],
   contactPerson: [{ required: true, message: "请输入联系人 ", trigger: "blur" }],
   phonenumber: [
      { required: true,message: "请输入联系方式", trigger: "blur" },
      { type: 'number',pattern: /^[0-9]*$/,message: "输入手机号格式不对", trigger:["blur", "change"] }
   ],
   email: [{ required: true,type: 'email', message: "请输入联系邮箱", trigger: ["blur", "change"] }],
   eastSbussParkingNum: [{ required: true, message: "请选择东区小客车车位数", trigger: "change" }],
   eastBbussParkingNum: [{ required: true, message: "请选择东区大客车车位数", trigger: "change" }],
   westSbussParkingNum: [{ required: true, message: "请选择西区小客车车位数", trigger: "change" }],
   westBbussParkingNum: [{ required: true, message: "请选择西区小客车车位数", trigger: "change" }],
  },
});

const { queryParams, rules } = toRefs(data);

const dialogVisible = computed({
   set:(val) => {
      emit("close")
   },
   get:() =>{
      return props?.areaData.open
   }
})

const handleChange = (node,isSelect,isChildSelect) =>{
   queryParams.value.serviceName = node.label;
   queryParams.value.serviceName = node.id;
}

const handleClose = ()=> {
   proxy.resetForm("serviceRef");
}
const handleOpen = ()=> {
   proxy.resetForm("serviceRef");
   if(!props.areaData.serviceId){
      return
   }
   getInfo()
}

/** 提交按钮 */
const submitForm = () => {
  proxy.$refs["serviceRef"].validate(valid => {
    if (valid) {
      if (props.areaData.serviceId) {
         updateServiceArea(queryParams.value).then(response => {
            if(response.code == 200){
               emit("submitSuccess")
               proxy.$modal.msgSuccess("修改配置成功");
            }
            else{
               proxy.$modal.msgError(response?.msg || "修改配置失败，请稍后重试!");
            }
         }).catch(() => {
            proxy.$modal.msgError("系统错误，请稍后重试!");
         })
      } else {
         addServiceArea(queryParams.value).then(response => {
            if(response.code == 200){
               emit("submitSuccess")
               proxy.$modal.msgSuccess("新增配置成功");
            }
            else{
               proxy.$modal.msgError(response?.msg || "新增配置失败，请稍后重试!");
            }
         }).catch(() => {
            proxy.$modal.msgError("系统错误，请稍后重试!");
         })
      }
    }
  });
}

const getInfo = () =>{
   getServiceAreaInfo(props.areaData.serviceId).then(response => {
      if(response.code == 200){
         queryParams.value = response.data;
         queryParams.value.phonenumber = Number(queryParams.value.phonenumber)
         queryParams.value.serviceScore = Number(queryParams.value.serviceScore)
      }
      else{
         proxy.$modal.msgError(response?.msg || "获取配置信息失败，请稍后重试!");
         proxy.resetForm("serviceRef");
      }
   }).catch(() => {
      proxy.$modal.msgError("系统错误，请稍后重试!");
   })
}

const deptTreeData = computed(()=>{
   return useUserStore().deptTreeData
})
</script>

<style lang="css" scoped>
   .service-form{
      display: flex;
      justify-content: space-between;
      .box{
         width: 32%;
      }
   }
   .btn-wrap{
      text-align: center
   }
</style>
